<template>
  <div class="App">
    <Item title="美食">
      <template v-slot:default>
        <img
          src="https://img1.baidu.com/it/u=2911909188,130959360&fm=253&fmt=auto&app=138&f=JPEG?w=440&h=641"
          width="180px"
          height="180px"
          alt=""
        />
      </template>

      <template v-slot:footer>
        <h3>footer</h3>
      </template>
    </Item>

    <Item title="游戏">
      <template #default>
        <ul>
          <li v-for="item in list" :key="item.id">{{ item.content }}</li>
        </ul>
      </template>

      <template #footer>
        <p>footer</p>
      </template>
    </Item>

    <Item title="音乐">
      <template v-slot:default>
        <video src="" width="180"></video>
      </template>

      <template v-slot:footer>
        <div>footer</div>
      </template>
    </Item>
  </div>
</template>

<script>
import Item from "./components/Item";
export default {
  name: "App",
  components: {
    Item,
  },
  data() {
    return {
      list: [
        { id: "001", content: "DNF" },
        { id: "002", content: "CF" },
        { id: "003", content: "LOL" },
      ],
    };
  },
};
</script>

<style scoped>
.App {
  display: flex;
  justify-content: space-around;
}
</style>
